import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import axios from '../axios';
import '../views/Pet.css';

function Pet() {
    const location = useLocation();
    const { pet } = location.state || {};
    const navigate = useNavigate();
    const [images, setImages] = useState([]);

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000
    };
    const handleAdoptClick = () => {
        if (pet && pet.petId) {
            navigate(`/apply/${pet.petId}`);
        } else {
            console.error('未获取到宠物ID')
        }
    };
    const handleCancelClick = () => {
        navigate('/adoptcenter');
    };


    useEffect(() => {
        if (pet && pet.petId) {
            axios.get(`/imgs/getImg?pet_id=${pet.petId}`)
                .then(response => {
                    console.log('Response data:', response.data.data); // 打印返回的数据
                    setImages(response.data.data); // 直接将数组赋值给 images
                })
            //    .catch(error => {
            //         console.error('Error fetching images:', error);
            //     });
        }
    }, [pet]);

    return (
        <div className="pet-container">

            <div className="slider-container">

                <Slider {...settings}>
                    {images.map((image, index) => (
                        <div key={index}>
                            <img src={image} alt={`Pet ${index}`} style={{ width: '100%', height: '500px' }} />
                        </div>
                    ))}
                </Slider>
            </div>
            <div className="info-container">
                <h1>{pet?.petName}</h1>
                <p>年龄: {pet?.petAge}</p>
                <p>类型: {pet?.petVariety}</p>
                <p>性别: {pet?.petSexId === 3 ? '妹妹' : pet?.petSexId === 4 ? '弟弟' : '未知'}</p>
                <p>描述: {pet?.petDescribe}</p>
                <div className='button-group'>
                <button onClick={handleAdoptClick}>申请领养</button>
                <button onClick={handleCancelClick}>取消</button>
                </div>
            </div>
        </div>
    );
}

export default Pet;